<template>
  <view class="content">
    <view class="book_warp">
      <template v-if="total !== 0">
        <view
          class="book_card_warp"
          @click="clickItem(item.commodityInfoId)"
          v-for="item in bookList"
          :key="item.id"
        >
          <view class="flex_b">
            <view class="img_warp">
              <u-image
                :src="item.commodityAttachementVOS[0].fileUrl"
                width="160upx"
                height="190upx"
                mode="widthFix"
              >
                <view slot="error" style="font-size: 24upx">加载失败</view>
              </u-image>
            </view>

            <view class="book_detail">
              <view class="book_name">{{ item.name || "书籍名称" }}</view>
              <view class="book_creat_time">{{
                item.createTime | formatTime
              }}</view>

              <view class="integral">总计支付: {{ item.payTotal }}积分</view>
            </view>
          </view>

          <view class="book_use_num">
            <view class="receiveName">收件人:{{ item.receiveName }}</view>
            <view class="receiveName">地址:{{ item.receiveAddress }}</view>
            <view class="receiveName">{{ item.receivePhone }}</view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="img_warp flex_y_c">
          <image src="@/static/images/no_problem.png" mode="widthFix" />
          <view class="tip">暂无书籍</view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { userinfoGoods } from "@/api/course";
export default {
  data() {
    return {
      params: {
        pageSize: 20,
        pageNum: 1,
      },
      bookList: [],
      hasMore: true,
      total: 0,
    };
  },
  onLoad() {
    this.getBookList();
  },
  onReachBottom() {
    if (!this.hasMore) return;
    this.$u.throttle(this.getBookList(), 1000, true);
  },
  methods: {
    clickItem(id) {
      this.$u.route("/pages/book_detail/book_detail", {
        id,
      });
    },
    // 获取数据
    getBookList() {
      userinfoGoods(this.params).then((res) => {
        console.log(res);
        this.total = res.total;
        this.bookList = [...this.bookList, ...res.list];
        this.params.pageNum += 1;
        if (res.list.length < this.params.pageSize) {
          this.hasMore = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20upx 30upx;
  width: 100vw;
  .img_warp {
    width: 100%;
    .tip {
      font-size: 40upx;
      font-weight: 600;
      margin-top: 40upx;
    }
  }
  .book_card_warp {
    width: 100%;
    margin-top: 20upx;
    border-bottom: 2upx solid #ccc;

    .img_warp {
      width: 160upx;
      height: 190upx;
      flex-shrink: 0;
    }

    .book_detail {
      flex: 1;
      margin-left: 20upx;
      position: relative;
      height: 190upx;
      .book_name {
        width: 520upx;
        height: 44upx;
        font-size: 32upx;
        font-weight: bold;
        line-height: 44upx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .book_creat_time {
        height: 34upx;
        font-size: 24upx;
        font-weight: 500;
        line-height: 34upx;
        color: #666666;
        margin-top: 22upx;
        padding-left: 10upx;
      }

      .book_use_num {
        margin-top: 40upx;
        height: 32upx;
        font-size: 22upx;
        font-weight: 500;
        line-height: 32upx;
        color: #666666;
      }

      .integral {
        @include positionRB();
        height: 50upx;
        font-size: 36upx;
        font-weight: 800;
        line-height: 50upx;
        color: #ff3b30;
      }
    }
    .book_use_num {
      height: 40px;
      border-top: 2upx solid #eee;
      width: 100%;
      display: flex;
      align-items: center;
      .receiveName {
        width: 100%;
        margin-right: 20upx;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
